@import "@automattic/typography/styles/variables";

$badge-padding-x: 11px;
$badge-padding-y: 2px;

.badge {
	display: inline-block;
	// A number large enough to exceed height of any badge to make it look like a pill
	border-radius: 1000px; /* stylelint-disable-line scales/radii */
	padding: $badge-padding-y $badge-padding-x;
	font-size: $font-body-small;
	line-height: 17px;
	height: 18px;
}

.badge--warning-clear {
	color: var(--color-warning);
	border: 1px solid var(--color-warning);
	border-radius: 12px; /* stylelint-disable-line scales/radii */
}

.badge--warning {
	color: var(--color-warning-80);
	background-color: var(--color-warning-20);
}

.badge--success {
	color: var(--color-text-inverted);
	background-color: var(--color-success);
}

.badge--info {
	color: var(--color-neutral-70);
	background-color: var(--color-neutral-5);
}

.badge--info-blue {
	background-color: var(--studio-blue-50);
	color: var(--color-text-inverted);
}

.badge--info-green {
	color: var(--studio-green-80);
	background-color: rgba(184, 230, 191, 0.64);
}

.badge--info-purple {
	color: var(--studio-woocommerce-purple-80);
	background-color: var(--studio-woocommerce-purple-5);
}

.badge--error {
	background-color: var(--color-error);
	color: var(--color-text-inverted);
}
